<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
        <title>Sierra Sliders</title>
        <style type="text/css">
            div#equalizer{
                position: relative;
                left: 40px;
                top: 40px;
            }
            span.buzzword{
                position: absolute;
                background-color: #3f607f;
                color: white;
                font-family: tahoma;
                font-size: 10pt;
                text-align: center;
                width: 77px;
                top: 5px;
                height: 34px;
            }
            span#txt0{ left: 25px; }
            span#txt1{ left: 102px; }
            span#txt2{ left: 179px; }
            span#txt3{ left: 256px; }
            span#txt4{ left: 333px; }
            span#txt5{ left: 410px; }
            span#txt6{ left: 487px; }
            span#txt7{ left: 564px; }
            body{
                font-family: tahoma;
                font-size: 12pt;
            }
            img{
                padding: 0px;
                margin: 0px;
            }
            img.slider{
                position: absolute;
                top: 138px;
            }
            img#sl0{ left: 37px; }
            img#sl1{ left: 114px; }
            img#sl2{ left: 191px; }
            img#sl3{ left: 268px; }
            img#sl4{ left: 345px; }
            img#sl5{ left: 422px; }
            img#sl6{ left: 499px; }
            img#sl7{ left: 576px; }
        </style>
        <script type="text/javascript" src="MochiKit.js"></script>
        <script type="text/javascript">
            var MIN_Y = 46;
            var MAX_Y = 230;
            var STARTING_Y = 138;
            function init(evt){
                parseFragment();
                display(evt);
            }
            function getY(elem){
                return elementPosition(elem, "equalizer").y;
            }
            function setY(elem, y){
                elem.style.top = y + 'px';
            }
            function getEventY(evt){
                return evt.pageY || (evt.clientY + document.body.scrollTop);
            }
            var rules = [46, 69, 92, 115, 138, 161, 184, 207, 230];
            function snap(slider){
                var y = getY(slider);
                var rule = null;
                var min = 0;
                var max = 0;
                if (!y) y = STARTING_Y;
                for (var i = 0; i < rules.length; i++){
                    rule = rules[i];
                    min = rule - 11;
                    max = rule + 12;
                    if (y >= min && y <= max){
                        setY(slider, rule);
                        return 4 - i;
                    }
                }
                logDebug('snap() ' + y);
                return 0;
            }
            function slideTo(slider, value){
                setY(slider, rules[4 - value]);
            }
            function parseFragment(){
                if (location.hash == '') return;
                // remove leading hash
                var fragStr = location.hash.slice(1);
                var parts = fragStr.split(';');
                var buzzwords = [];
                var part = null;
                var buzz = null;
                var eqslider = null;
                for (var i=0; i < parts.length; i++){
                    part = parts[i].split('=');
                    buzz = part[0].split('+').join(' ');
                    buzzwords.push(buzz);
                    eqslider = $('sl' + i);
                    slideTo(eqslider, parseInt(part[1]));
                }
                $('buzzwords').value = buzzwords.join(', ')
            }
            function updateFragment(fragments){
                var strs = [];
                var fragment = null;
                for (var i = 0; i < fragments.length; i++){
                    fragment = fragments[i];
                    strs.push(fragment[0].split(' ').join('+') + '=' + fragment[1]);
                }
                location.hash = '#' + strs.join(';');
            }

            String.prototype.trim = function(){
               // Use a regular expression to replace leading and trailing 
               // spaces with the empty string
               return this.replace(/(^\s*)|(\s*$)/g, "");
            }

            function display(evt){
                var buzzwords = $('buzzwords').value.split(',');
                var buzz = null;
                var txtdisplay = null;
                var eqbk = null;
                var eqslider = null;
                var eqvalue = 0;
                var fragments = [];
                for (var i=0; i < 8;i++){
                    txtdisplay = $('txt' + i);
                    eqbk = $('eqbk' + i);
                    eqslider = $('sl' + i);
                    if (i < buzzwords.length){
                        // strip excess whitespace
                        buzz = buzzwords[i].trim();
                        replaceChildNodes(txtdisplay, buzz);
                        eqbk.style.display = 'inline';
                        txtdisplay.style.display = 'block';
                        eqslider.style.display = 'inline';
                        eqvalue = snap(eqslider);
                        fragments.push([buzz, eqvalue]);
                    }else{
                        eqbk.style.display = 'none';
                        txtdisplay.style.display = 'none';
                        eqslider.style.display = 'none';
                    }

                }
                updateFragment(fragments);
                evt.cancelBubble = true;
                if (evt.stopPropagation) evt.stopPropagation();
                evt.returnValue = false;
                return false;
            }
            function target(evt){
                var t = evt.target;
                if (!t) t = evt.srcElement; // fix IE bug
                if (t.nodeType == 3) t = t.parentNode; // fix Safari bug
                return t;
            }
            var curr_slider = null;
            var curr_y = 0;
            function begindragslider(evt){
                var targ = target(evt);
                if (targ.className == 'slider'){
                    curr_slider = targ;
                    curr_y = getEventY(evt);
                }
                evt.returnValue = false;
                return false;
            }
            function dragslider(evt){
                if (!curr_slider) return;
                var local_y = getEventY(evt);
                var diff_y = curr_y - local_y;
                var curr_top = getY(curr_slider);
                if (!curr_top) curr_top = STARTING_Y;
                var new_top = curr_top - diff_y;
                if (new_top > MIN_Y && new_top < MAX_Y){
                    curr_y = local_y;
                    setY(curr_slider, new_top);
                }
                evt.returnValue = false;
                return false;
            }
            function enddragslider(evt){
                if (!curr_slider) return;
                curr_slider = null;
                display(evt);
                evt.returnValue = false;
                return false;
            }
            function preventDefault(evt){
                // try block to fix mozilla/firefox incompatibility
                try{
                  if (evt.preventDefault) evt.preventDefault();
                }catch(e){
                }
                return false;
            }
        </script>
	</head>
    <body onload="init(event)" onmouseup="enddragslider(event)"
        ondragover="preventDefault(event)" ondragenter="preventDefault(event)"
        onmousemove="dragslider(event)" onmousedown="begindragslider(event)">
		<h1>Sierra Sliders</h1>
        <p>An example page for using an equalizer as a visualization tool, as
        described by <a href="http://headrush.typepad.com/creating_passionate_users/2005/11/how_to_come_up_.html">Kathy Sierra</a>, using images from her site
        (with permission).</p>
        <form id="buzzwords_form" onsubmit="display(event);" method="get">
            <label for="buzzwords">Buzzwords: </label>
            <input type="text" size="80" id="buzzwords"
            value="Fun, Customi-zation, Granularity, Tagging, Skateboard Shoes"></input>
            <span>(Up to eight buzzwords)</span>
        </form>
        <div id="equalizer">
            <img src="eq_scale.png" width="25" height="260"
            /><img id="eqbk0" src="eq_background.png" width="77" height="260"
            /><img id="eqbk1" src="eq_background.png" width="77" height="260"
            /><img id="eqbk2" src="eq_background.png" width="77" height="260"
            /><img id="eqbk3" src="eq_background.png" width="77" height="260"
            /><img id="eqbk4" src="eq_background.png" width="77" height="260"
            /><img id="eqbk5" src="eq_background.png" width="77" height="260"
            /><img id="eqbk6" src="eq_background.png" width="77" height="260"
            /><img id="eqbk7" src="eq_background.png" width="77" height="260"/>
            <span id="txt0" class="buzzword">Text 0</span>
            <span id="txt1" class="buzzword">Text 1</span>
            <span id="txt2" class="buzzword">Text 2</span>
            <span id="txt3" class="buzzword">Text 3</span>
            <span id="txt4" class="buzzword">Text 4</span>
            <span id="txt5" class="buzzword">Text 5</span>
            <span id="txt6" class="buzzword">Text 6</span>
            <span id="txt7" class="buzzword">Text 7</span>
            <img id="sl0" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl1" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl2" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl3" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl4" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl5" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl6" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
            <img id="sl7" class="slider" src="slider_blue.gif" width="22"
            height="18" onmousedown="preventDefault(event)"/>
        </div>
	</body>
</html>
